<template>
    <view class="floating-window"
        :style="{
            transform: IsHide ? 'translate(-50%, 100%)' : 'translate(-50%, 0%)' 
        }"
    >
        <image class="cover" :src="VideoInfo.img_url ?? VideoInfo.cover_url" @load="imgLoad"></image>

        <view class="content">
            <view class="title">{{ VideoInfo.video_name }}</view>
            <view class="history">上次看到第{{ VideoInfo.sort }}集</view>
        </view>
        <view class="more-action">
            <image mode="widthFix" :src="OSSImgUrl('jx-see-bg.png')"/>
            <view class="txt">继续观看</view>
        </view>
    </view>
</template>

<script>
import { debounce, OSSImgUrl } from '@/utils'

export default {
    props:{
      IsHide: false,
      VideoInfo: {
        type: Object,
        default: null
      },
    },
    data() {
        return {
            isshow: false
        }
    },
    created() {
        // this.VideoInfo = uni.getStorageSync('VideoInfo')
        console.log("🚀 ~ created ~ this.VideoInfo:", this.VideoInfo)
        // console.log("🚀 ~ created123123 ~ VideoInfo:", this.VideoInfo)
        // this.isshow = (this.VideoInfo?.img_url ?? this.VideoInfo?.cover_url) ? true : false;
    },
    methods: {
        OSSImgUrl: OSSImgUrl,
        imgLoad() {
            console.log("图片加载完毕")
            this.isshow = true
        }
    }
}
</script>
<style lang="scss" scoped>
.floating-window {
    position: fixed;
    width: 94%;
    left: 50%;
    bottom: 0px;
    transform: translate(0%, 0px);
    border-radius: 10rpx;
    transition: transform ease-in-out 0.3s;
    background-image: linear-gradient(to right, #FFF1E7, #FED5B5);

    display: flex;
    box-sizing: border-box;
    padding: 20rpx 30rpx;

    .cover{
        width: 125rpx;
        height: 145rpx;
        border-radius: 16rpx;
    }

    .content{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        box-sizing: border-box;
        padding: 0px 30rpx;

        width: 400rpx;

        .title{
            width: 100%;
            margin-top: 10rpx;
            font-size: 32rpx;
            color: #383838;
            
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        .history{
            width: 100%;
            margin-top: 20rpx;
            font-size: 26rpx;
            color: #BCB3B1;
            
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }
    }

    .more-action{
        margin-top: 70rpx;
        height: 54rpx;
        position: relative;

        .txt{
            position: absolute;
            top: 43%;
            left: 20%;
            transform: translateY(-50%);
            font-size: 24rpx;
            color: #fff;
        }

        image {
            width: 150rpx;
            height: 54rpx;
        }
    }
}
</style>